<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CClub在线笔试</title>
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-border{
            width:1430px;
            height:60px;
            border: 1px solid rgb(230,230,230);
            margin-left:40px;
            margin-top:20px;
        }
        .el-radio_button{
            background-color:#5272ff;
            border:1px solid #ececed;
            font-size:12px;
            width:67px;
            height:32px;
            padding:8px 13px 8px 13px;
        }
        .el-question_button{
            background-color:#fff;
            border:1px solid #ececed;
            font-size:12px;
            width:67px;
            height:32px;
            padding:8px 13px 8px 13px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left:30px;margin-top:15px;font-size:24px;height:28px;">
        <div style="float:left;">{{name}}</div>
        <div style="float:left;margin-left:1100px;">
            <a href="javascript:void(0);" style="text-decoration:none;color:rgb(60,60,60);font-size:14px;">视频面试</a>
        </div>
        <div style="float:left;margin-left:30px;">
            <el-dropdown placement="bottom-start">
                <span class="el-dropdown-link">{{userInfo.user_company}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="background-color:#f6f8ff;">{{userInfo.user_phone}}</el-dropdown-item>
                    <el-dropdown-item disabled style="font-size:12px;">当前公司:</el-dropdown-item>
                    <el-dropdown-item style="font-size:12px;">&nbsp;&nbsp;&nbsp;{{userInfo.user_company}}</el-dropdown-item>
                    <el-dropdown-item >个人中心</el-dropdown-item>
                    <el-dropdown-item divided>
                        <a href="javascript:void(0);" @click="signOut" style="text-decoration:none;color:rgb(30,30,30);">
                            退出登录
                        </a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <el-divider></el-divider>
    <div style="margin-left:40px;margin-top:50px;">
        <span>
            <a href="javascript:void(0);" @click="">
                <img src="../img/back.png" alt="" width="14px" height="14px">
            </a>
        </span>
        <span>{{exam.exam_name}}</span>
        <span>/</span>
        <span>候选人列表</span>
        <span style="margin-left:15px;font-size:12px;color:#8b8f94;">
            共{{exam.exam_user_number}}人
        </span>
        <span style="margin-left:8px;font-size:12px;color:red;" v-if="exam.exam_state===0">
            笔试未开始
        </span>
        <span style="margin-left:8px;font-size:12px;color:red;" v-if="exam.exam_state!=0">
            {{intoExamNumber}}
        </span>
        <span style="font-size:12px;color:#8b8f94;" v-if="exam.exam_state!=0">
            人参加考试
        </span>
        <span style="margin-left:850px;">
            <el-dropdown>
                <el-button type="primary" size="small" style="width:150px;">
                    批量通知候选人<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="font-size:12px;" >
                    <a href="javascript:void(0);" @click="noticeMoreCandidate(0)" style="text-decoration:none;color:rgb(60,60,60);">通知未发送的候选人</a>
                </el-dropdown-item>
                <el-dropdown-item style="font-size:12px;" >
                    <a href="javascript:void(0);" @click="noticeMoreCandidate(1)" style="text-decoration:none;color:rgb(60,60,60);">通知全部候选人</a>
                </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </span>
        <span style="margin-left:10px;">
            <el-button type="primary" size="small" @click="addCandidate">添加候选人</el-button>
        </span>
    </div>
    <div class="el-border">
        <div style="margin-left:30px;margin-top:15px;">
            <div style="float:left;">
                <el-input v-model="input" placeholder="请输入内容" style="width:200px;" size="small"></el-input>
            </div>
            <div style="margin-left:5px;float:left;">
                <el-button type="info" style="width:60px;" size="small" @click="searchCandidateByKey">搜索</el-button>
            </div>
            <div style="margin-left:20px;margin-top:5px;float:left;">
                <span :class="first?'el-radio_button':'el-question_button'" style="border:1px solid #ececed;border-radius:6px 0 0 6px;">
                    <a href="javascript:void(0);" @click="switchFirst" :style="{'color':first?'#fff':'#000'}" style="text-decoration:none;">全部</a>
                </span>
                <span :class="second?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchSecond" :style="{'color':second?'#fff':'#000'}" style="text-decoration:none;">未通知</a>
                </span>
                <span :class="third?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchThird" :style="{'color':third?'#fff':'#000'}" style="text-decoration:none;">已通知</a>
                </span>
                <span :class="fourth?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchFourth" :style="{'color':fourth?'#fff':'#000'}" style="text-decoration:none;">未进入笔试</a>
                </span>
                <span :class="fifth?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchFifth" :style="{'color':fifth?'#fff':'#000'}" style="text-decoration:none;">已进入笔试</a>
                </span>
            </div>
            <div style="float:left;margin-left:1060px;font-size:12px;color:rgb(139, 143, 148);margin-top:-15px;">{{tempList.length}}个结果</div>
        </div>
    </div>
    <div style="margin-left:40px;width:1430px;margin-bottom:50px;">
        <template>
            <el-table :data="tempList" style="width: 100%">
                <el-table-column prop="candidate_name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="candidate_phone" label="手机" width="120">
                </el-table-column>
                <el-table-column prop="candidate_mail" label="邮箱" width="200">
                </el-table-column>
                <el-table-column prop="exam_user_state" label="状态" width="130">
                    <template scope="scope">
                        <span v-if="scope.row.exam_user_state===0" style="color:red;">未进入笔试</span>
                        <span v-if="scope.row.exam_user_state===1" style="color:rgb(200,200,200)">已进入笔试</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exam_notice" label="是否通知" width="130">
                    <template scope="scope">
                        <span v-if="scope.row.exam_notice===1">已通知</span>
                        <span v-if="scope.row.exam_notice===0">未通知</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exam_user_score" label="分数" width="120" sortable>
                    <template scope="scope">
                        <span style="color:red;">{{scope.row.exam_user_score}}</span>
                        <span>/{{exam.exam_score}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exam_user_skip_number" label="跳出屏幕次数" width="160">
                </el-table-column>
                <el-table-column prop="" label="查看笔试录屏" width="150">
                    <template scope="scope">
                        <span v-if="exam.exam_jumpOut_number===1">
                            <a href="javascript:void(0);" style="text-decoration:none;">
                                查看录屏
                            </a>
                        </span>
                        <span v-if="exam.exam_jumpOut_number!=1">
                            ----
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="320">
                    <template scope="scope">
                        <span>
                            <el-button type="danger" size="small" @click="deleteExamUser(scope.row.access_code)">删除</el-button>
                        </span>
                        <span style="margin-left:13px;">
                            <el-button type="success" size="small" @click="notice(scope.row)">通知候选人</el-button>
                        </span>
                        <span style="margin-left:13px;">
                            <el-button type="primary" size="small" @click="updateExamUserInfoOpen(scope.row)">修改候选人信息</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <el-dialog title="候选人信息修改" :visible.sync="updateExamUserInfoDialog" width="25%">
        <div style="font-size:13px;">
            <div>
                <span>名字:</span>
                <span style="margin-left:10px;">
                    <el-input v-model="exam_user.candidate_name" placeholder="请输入候选人名字" size="small" style="width:200px;"></el-input>
                </span>
            </div>
            <div style="margin-top:30px;">
                <span>电话:</span>
                <span style="margin-left:10px;">
                    <el-input v-model="exam_user.candidate_phone" placeholder="请输入候选人电话" size="small" style="width:200px;"></el-input>
                </span>
            </div>
            <div style="margin-top:30px;">
                <span>邮箱:</span>
                <span style="margin-left:10px;">
                    <el-input v-model="exam_user.candidate_mail" placeholder="请输入候选人邮箱" size="small" style="width:200px;"></el-input>
                </span>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateExamUserInfoDialog = false">取 消</el-button>
            <el-button type="primary" @click="updateExamUserInfo">确 定</el-button>
        </div>
    </el-dialog>
    <div></div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            name: 'CCLUB 在线笔试',
            userInfo:{
                user_phone: '18229583486',
                user_company: '茗少集团'
            },
            tableData: [],
            input: '',
            first: true,
            second: false,
            third: false,
            fourth: false,
            fifth: false,
            exam:{},
            tempList:[],
            intoExamNumber: 0,
            exam_user:{},
            updateExamUserInfoDialog:false,
        },
        created(){
            this.getExamInfo();
            this.getExamUserList();
        },
        methods:{
            signOut(){

            },
            switchFirst(){
                this.fourth=this.fifth=this.second=this.third=!(this.first=true);
                this.tempList=[];
                for(let i=0;i<this.tableData.length;i++){
                    this.tempList[i]=this.tableData[i];
                }
            },
            switchSecond(){
                this.fourth=this.fifth=this.first=this.third=!(this.second=true);
                this.tempList=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_notice===0){
                        this.tempList.push(this.tableData[i]);
                    }
                }
            },
            switchThird(){
                this.fourth=this.fifth=this.first=this.second=!(this.third=true);
                this.tempList=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_notice===1){
                        this.tempList.push(this.tableData[i]);
                    }
                }
            },
            switchFourth(){
                this.first=this.second=this.third=this.fifth=!(this.fourth=true);
                this.tempList=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_user_state===0){
                        this.tempList.push(this.tableData[i]);
                    }
                }
            },
            switchFifth(){
                this.first=this.second=this.third=this.fourth=!(this.fifth=true);
                this.tempList=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_user_state===1){
                        this.tempList.push(this.tableData[i]);
                    }
                }
            },
            async getExamInfo(){
                let url=window.location.href.split("/");
                let exam_id=url[url.length-1];
                let result=await axios.get('/getOneExamInfo?exam_id='+exam_id);
                this.exam=result.data;
            },
            async getExamUserList(){
                let url=window.location.href.split("/");
                let exam_id=url[url.length-1];
                let result=await axios.get('/getExamUserList?exam_id='+exam_id);
                this.tableData=result.data;
                this.tempList=result.data;
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_user_state===1){
                        this.intoExamNumber++;
                    }
                }
            },
            deleteExamUser(access_code){
                this.$confirm('此操作将永久删除该候选人信息记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteExamUserByAccessCode(access_code);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async deleteExamUserByAccessCode(access_code){
                let result=await axios.get('/deleteExamUserByAccessCode?access_code='+access_code+"&exam_id="+this.exam.exam_id);
                if(result.data===1){
                    this.$message({
                        message: '删除候选人信息成功',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '删除候选人信息失败,系统繁忙',
                        type: 'warning'
                    });
                }
                this.getExamInfo();
                this.getExamUserList();
            },
            searchCandidateByKey(){
                this.tempList=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].candidate_name.indexOf(this.input)!=-1){
                        this.tempList.push(this.tableData[i]);
                    }else if(this.tableData[i].candidate_phone.indexOf(this.input)!=-1){
                        this.tempList.push(this.tableData[i]);
                    }else if(this.tableData[i].candidate_mail.indexOf(this.input)!=-1){
                        this.tempList.push(this.tableData[i]);
                    }
                }
            },
            notice(row){
                this.$confirm('是否通知当前候选人参加笔试, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.noticeOneCandidte(row);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async noticeOneCandidte(row){
                let params=new FormData();
                params.append("candidate_name",row.candidate_name);
                params.append("candidate_mail",row.candidate_mail);
                params.append("exam_start_time",this.exam.exam_start_time);
                params.append("exam_noEntry_time",this.exam.exam_noEntry_time);
                params.append("exam_longTime",this.exam.exam_longTime);
                params.append("exam_name",this.exam.exam_name);
                params.append("access_code",row.access_code);
                let result=await axios({
                    method: 'post',
                    url: '/noticeOneCandidte',
                    data: params,
                });
                if(result.data===1){
                    this.$message({
                        message: '通知该候选人成功',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '通知该候选人失败,系统繁忙',
                        type: 'warning'
                    });
                }
                this.getExamUserList();
            },
            updateExamUserInfoOpen(row){
                this.exam_user=row;
                this.updateExamUserInfoDialog=true;
            },
            async updateExamUserInfo(){
                let params=new FormData();
                params.append("candidate_name",this.exam_user.candidate_name);
                params.append("candidate_phone",this.exam_user.candidate_phone);
                params.append("candidate_mail",this.exam_user.candidate_mail);
                params.append("access_code",this.exam_user.access_code);
                let result=await axios({
                    method: 'post',
                    url: '/updateExamUserInfo',
                    data: params,
                });
                if(result.data===1){
                    this.$message({
                        message: '修改候选人信息成功',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '修改候选人信息失败,系统繁忙',
                        type: 'warning'
                    });
                }
                this.updateExamUserInfoDialog=false;
                this.getExamUserList();
            },
            async noticeMoreCandidate(more){
                let params=new FormData();
                params.append("exam_id",this.exam.exam_id);
                params.append("more",more);
                params.append("exam_name",this.exam.exam_name);
                params.append("exam_start_time",this.exam.exam_start_time);
                params.append("exam_noEntry_time",this.exam.exam_noEntry_time);
                params.append("exam_longTime",this.exam.exam_longTime);
                let result=await axios({
                    method: 'post',
                    url: '/noticeMoreCandidate',
                    data: params,
                });
                if(result.data===1){
                    this.$message({
                        message: '通知候选人参加笔试成功',
                        type: 'success'
                    });
                }else{
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                }
                this.getExamUserList();
            },
            addCandidate() {
                window.location.href = "../test_add_exam_candidate/" + this.exam.exam_id;
            }
        }
    })
</script>
</html>